<template>
  <div>
    <MenuItem :key="'auto' + index" :name="getNextName()" v-for="(value, index) in data" v-if="!value.children">{{ value.title }}</MenuItem>
    <Submenu :key="'auto' + index" :name="getNextName()" v-else>
      <template slot="title">
        {{ value.title }}
      </template>
      <AutoMenu :data="value.children"></AutoMenu>
    </Submenu>
  </div>
</template>

<script>
let counter = 0

export default {
  name: 'AutoMenu',
  props: ['data'],
  created () {
    this.n = parseInt(this.num)
  },
  methods: {
    getNextName () {
      return counter++
    }
  }
}
</script>

<style scoped>

</style>
